<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <!--返回顶部按钮-->
    <!-- <div class="ga-side-bar top"></div>
    <div class="ga-side-bar home"></div> -->

    <div class="ga-product-group">
      <div class="banner">
        <img mode="widthFix" src="http://ga-1255639017.file.myqcloud.com/images/shop/banner2.jpg" alt="">
      </div>

      <!-- <div class="person">
        <image  class="img-box" mode="aspectFill" src="http://ga-1255639017.file.myqcloud.com/images/test/img1.jpg"></image>
        <span class="name">guoa153****6666：1元买到海南荔枝1.5kg装水果，赚翻~</span>
      </div> -->

      <div class="tabs clearfix">
        <!-- <a class="item active" key="1" @click="groupnum(0,5)">五人团</a>
        <a class="item" key="2" @click="groupnum(6,10)">十人团</a>
        <a class="item" key="3" @click="groupnum(11,100)">百人团</a>
        <a class="item" key="4" @click="groupnum(101,1000)">千人团</a> -->
        <a :class="qwerqwre === index ? 'item active' : 'item' " v-for="item in tablist" :key="index" v-on:click="groupnum(item.start,item.end,index)">{{item.name}}</a>
      </div>

      <ul class="ga-group-list ga-media-list">
        <li v-for="item in grouplist" :key="index">
          <a class="item" :href="'/pages/shopgroup/main?id='+item.seid">
            <div class="item-media">
              <image class="img-box" mode="aspectFill" :src="item.icon"></image>
            </div>
            <div class="item-inner">
              <p class="title">{{item.title}}</p>
              <p class="p1">结束时间：{{item.end}}</p>
              <p class="p2">已团<span>{{item.group_num}}</span>件</p>
              <p class="p3">
                单独购买<span>¥{{item.shop_price}}</span>
              </p>
              <p class="p4">
                {{item.buy_num}}人团
                ¥<span> {{item.price}}</span>
              </p>
              <div class="btn primary">去拼团 <i class="icon-angle-right"></i></div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        grouplist:[],
        tablist:[
          {name:'五人团',start:0,end:5},
          {name:'十人团',start:6,end:10},
          {name:'百人团',start:11,end:100},
          {name:'千人团',start:101,end:1000},
        ],
        qwerqwre:0,
    }
  },
  methods: {
    /** 接口数据 */
    async groupnum (start,end,index){
      this.qwerqwre=index;
      let res = await this.$_util.ajax.get('https://guo-a.com/mapi/group/goodslist?start='+start+'&end='+end);
      if(res.code===200){
        this.grouplist=res.data;
      }

    }
  },

  created () {

  },
  mounted () {
    this.groupnum(this.tablist[0].start,this.tablist[0].end,0);
  }
}
</script>
